@import "../../style/_variables.less";

.mooli-popover {
  position: absolute;
  overflow: visible;
  background-color: transparent;
  transition: opacity 0.15s, transform 0.15s;

  &--wrapper {
    display: inline-block;
  }

  &--arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: @popover-arrow-size;
  }

  &-content {
    overflow: hidden;
    border-radius: @popover-border-radius;
  }

  &-arrow {
    position: absolute;
    box-sizing: border-box;
    border-width: 7px;
    border-style: solid;
    border-color: transparent;
    z-index: 1;
  }

  &-arrow:after {
    position: absolute;
    display: block;
    content: "";
    box-sizing: border-box;
    border-color: transparent;
    border-style: solid;
    border-width: 7px;
  }
  &--light {
    color: @popover-light-text-color;
    .mooli-popover-content {
      background-color: @popover-light-background-color;
      box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12);
    }
    .mooli-popover-arrow {
      color: @popover-light-background-color;
    }
  }
  &--dark {
    color: @popover-dark-text-color;
    .mooli-popover-content {
      background-color: @popover-dark-background-color;
    }
    .mooli-popover-arrow {
      color: @popover-dark-background-color;
    }
  }

  /* top */
  &-placement-top > &-arrow,
  &-placement-top-left > &-arrow,
  &-placement-top-right > &-arrow {
    bottom: -7px;
    width: 14px;
    height: 7px;
    border-bottom-width: 0;
    border-top-color: hsla(0, 0%, 85%, 0.5);
  }

  &-placement-top > &-arrow:after,
  &-placement-top-left > &-arrow:after,
  &-placement-top-right > &-arrow:after {
    border-bottom-width: 0;
    border-top-color: currentColor;
    left: -7px;
    top: -8px;
  }

  /* bottom */
  &-placement-bottom > &-arrow,
  &-placement-bottom-left > &-arrow,
  &-placement-bottom-right > &-arrow {
    top: -7px;
    width: 14px;
    height: 7px;
    border-top-width: 0;
    border-bottom-color: hsla(0, 0%, 85%, 0.5);
  }

  &-placement-bottom > &-arrow:after,
  &-placement-bottom-left > &-arrow:after,
  &-placement-bottom-right > &-arrow:after {
    border-top-width: 0;
    border-bottom-color: currentColor;
    left: -7px;
    top: 1px;
  }

  /* left */
  &-placement-left > &-arrow,
  &-placement-left-top > &-arrow,
  &-placement-left-bottom > &-arrow {
    right: -7px;
    width: 7px;
    height: 14px;
    border-right-width: 0;
    border-left-color: hsla(0, 0%, 85%, 0.5);
  }

  &-placement-left > &-arrow:after,
  &-placement-left-top > &-arrow:after,
  &-placement-left-bottom > &-arrow:after {
    border-right-width: 0;
    border-left-color: currentColor;
    left: -8px;
    top: -7px;
  }

  /* right */
  &-placement-right > &-arrow,
  &-placement-right-top > &-arrow,
  &-placement-right-bottom > &-arrow {
    left: -7px;
    width: 7px;
    height: 14px;
    border-left-width: 0;
    border-right-color: hsla(0, 0%, 85%, 0.5);
  }

  &-placement-right > &-arrow:after,
  &-placement-right-top > &-arrow:after,
  &-placement-right-bottom > &-arrow:after {
    border-left-width: 0;
    border-right-color: currentColor;
    left: 1px;
    top: -7px;
  }

  &-placement-top-left > &-arrow,
  &-placement-bottom-left > &-arrow {
    left: 16px;
  }

  &-placement-top > &-arrow,
  &-placement-bottom > &-arrow {
    left: 50%;
    margin-left: -5px;
  }

  &-placement-top-right > &-arrow,
  &-placement-bottom-right > &-arrow {
    right: 16px;
  }

  &-placement-left-top > &-arrow,
  &-placement-right-top > &-arrow {
    top: 8px;
  }

  &-placement-left > &-arrow,
  &-placement-right > &-arrow {
    top: 50%;
    margin-top: -5px;
  }

  &-placement-left-bottom > &-arrow,
  &-placement-right-bottom > &-arrow {
    bottom: 8px;
  }
}
.mooli-popover-wrapper {
  display: inline-block;
}
